<template>

<div>
  <div>
  <el-button type="primary" @click="insert()">批量回复</el-button>
  </div>
  <el-table
     ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    max-height="500">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      fixed
      label="类型"
      width="100">
      <template slot-scope="scope">
        <el-tag  type="warning" v-if="scope.row.title == '建议'">建议</el-tag>
        <el-tag  type="danger" v-if="scope.row.title == '投诉'">投诉</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="community.name"
      label="社区"
      width="150">
    </el-table-column>
    <el-table-column
      prop="user.nickname"
      label="用户"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="180">
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容"
      width="120">
    </el-table-column>
    <el-table-column
      label="状态"
      width="120">
      <template slot-scope="scope">
        <el-tag  type="warning" v-if="scope.row.status == 0">未回复</el-tag>
        <el-tag  type="success" v-if="scope.row.status == 1">已回复</el-tag>
        <el-tag  type="danger" v-if="scope.row.status == 2">已删除</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="response"
      label="回复"
      width="120">
    </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="220">

      
      <template slot-scope="scope">
        <!-- 查看详情 -->
        <el-button
          @click.native.prevent="deleteRow(scope, tableData)"
          type="text"
          size="small">
          查看详情
        </el-button>
        <!-- 回复内容 -->
        <el-button
          @click.native.prevent="reply(scope, tableData)"
          type="text"
          size="small"> 
          回复内容
        </el-button>
      </template>

    </el-table-column>
  </el-table>
  <!-- 查看详情对话框 -->
    <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="50%"
    >
        <div>
    <div>
      <div>
        <span>类&nbsp;&nbsp;&nbsp;型:</span> <span>{{current.title}}</span>
      </div>
      <div>
        <span>社&nbsp;&nbsp;&nbsp;区:</span> <span>{{current.community.name}}</span>
      </div>
      <div> 
        <span>用&nbsp;&nbsp;&nbsp;户:</span> <span>{{current.user.nickname}}</span>
      </div>
      <div> 
        <span>电&nbsp;&nbsp;&nbsp;话:</span> <span>{{current.phone}}</span>
      </div>
      <div> 
        <span>内&nbsp;&nbsp;&nbsp;容:</span> <span>{{current.response}}</span>
      </div>
      
    </div>
    
    <div>
      <br>
      <br>
    </div>

    <span slot="footer" class="dialog-footer">
      
      <el-button type="primary" @click="close()">确 定</el-button>
    </span>
  </div>
    </el-dialog>


<el-dialog
    title="回复内容"
    :visible.sync="replyVisible"
    width="50%"
    >
    <div>

      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入回复内容"
        v-model="textarea">
      </el-input>

      <div>
        <br>
        <br>
      </div>

      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="replyadd(scope)">确 定</el-button>
        <el-button type="primary" @click="close()">取 消</el-button>
      </span>
    </div>
</el-dialog>

<!-- 统一回复 -->
<el-dialog
    title="回复内容"
    :visible.sync="replyAllVisible"
    width="50%"
    >
    <div>

      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入回复内容"
        v-model="textarea">
      </el-input>

      <div>
        <br>
        <br>
      </div>

      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="replyAlladd(scope)">确 定</el-button>
        <el-button type="primary" @click="close()">取 消</el-button>
      </span>
    </div>
</el-dialog>
  <div style="text-align: right;">
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>

  </div>
</template>

<script>
  export default {
    methods: {
      // 当前页码修改时
      handleCurrentChange:function(val){
        this.currentPage = val
        this.$axios.get("http://localhost:8080/complaintAdvice/pageComplaintAdvice/"+this.currentPage).then(res => {
          this.tableData = res.data.data
        })
        console.log(this.currentPage);

        // 将数据传给父组件让它渲染
        //this.$emit("data",{page: this.currentPage, size: this.size})
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      deleteRow(scope, rows) {
        //rows.splice(index, 1);
        this.dialogVisible = true
        console.log(scope.row);
        
        this.current = scope.row
      },
      reply(scope){
        this.current = scope.row
        this.replyVisible=true,
        this.rowid = scope.$index,
        console.log(scope);
      },
      replyadd:function(scope){
        this.tableData[this.rowid].response = this.textarea
        this.$axios.post("http://localhost:8080/complaintAdvice/replyComplaintAdvice",this.current).then(res => {
          
        })
        this.textarea = ""
        console.log(this.current);
        this.replyVisible = false
      },
      insert:function(){
        this.replyAllVisible = true
        
      },
      replyAlladd:function(){
        for(let aaa of this.multipleSelection){
          aaa.response = this.textarea
          aaa.status = 1
        }
        this.$axios.post("http://localhost:8080/complaintAdvice/replyAllComplaintAdvice",this.multipleSelection).then(res => {
          
        })
        this.replyAllVisible=false
      },
      close:function(){
        this.dialogVisible = false
        this.replyVisible = false
        this.replyAllVisible = false
      },
    },

    mounted(){
      this.$axios.get("http://localhost:8080/complaintAdvice/pageComplaintAdvice/1").then(res => {
          //console.log(res.data.data);
          this.tableData = res.data.data
        })
      this.$axios.get("http://localhost:8080/complaintAdvice/countComplaintAdvice").then(res => {
          this.total = res.data.data
        })
    },

    data() {
      return {
        tableData: [],
        dialogVisible:false,
        replyVisible:false,
        replyAllVisible:false,
        size:{},
        currentPage:{},
        rowid:{},
        total:0,
        current:{
          community:{name:{}},
          user:{nickname:{}}
        },
        scope:{
          row:{
            title:{}
          }
        },
        textarea:"",
        multipleSelection:[]
        
      }
    }
  }
</script>